<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <!-- 导航栏 -->
    <nav>
      <ul>
        <li>主页</li>
        <li>排行榜</li>
        <li>联系方式</li>
      </ul>
    </nav>
    <!-- 头部内容 -->

    <header>
      <!-- 导航栏的按钮 -->
      <button id="toggle">导航栏</button>
      <!-- 标题 -->
      <h2>欢迎来到富豪排行榜</h2>
      <!-- 欢迎语句 -->
      <p>weclome to the rich rank</p>
      <!-- 登陆按钮 -->
      <button id="login">登陆</button>
    </header>
    <!-- 主题内容 -->
    <div class="container">
   
      <!-- 左盒子 -->
      <aside>
        <!-- 五个按钮 -->
        <button id="add-user">添加账户</button>
        <button id="double">资金翻倍</button>
        <button id="show-millionaire">查询百万富翁</button>
        <button id="sort">财富榜</button>
        <button id="calculate">计算总额</button>
      </aside>
      <!-- 右盒子 -->
      <main id="main">
        <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>
        <table>
          <tbody> 
          </tbody>
        </table>
      </main>
     
    </div>
    <td class="x">123456</td>
    <script>
      let nfo=[
        {name:"张三",
         money:826266526
      },
      {name:"李四",
         money:82247
      },
      {name:"王五",
         money:20220
      }, {name:"赵六",
         money:52825
      },{
        name:"王二麻子",
        money:958692
      },
    ];
      var togg=document.querySelector("#toggle")//导航栏
   
     
      var addu=document.querySelector("#add-user")//添加账户
      var doubl=document.querySelector("#double")//资金翻倍
      var millionaire=document.querySelector("#show-millionaire")//百万富翁
      var sort=document.querySelector("#sort")//财富榜
      var calculate=document.querySelector("#calculate")//计算总额
      var body=document.querySelector("body")
      var sun=0;
      var arr=[];
      
      //添加账户
     togg.addEventListener("click",function(){
        body.classList.toggle("show_nav")
     })
     function addfn(){
       arr.push(nfo[sun])
       sun++
       updateDom(arr)
     }
     addu.addEventListener("click",addfn)
   //更新dom
function updateDom(arr){
  //清除上次数据
  main.innerHTML=`<h2>
  <strong>Person</strong>
  <span>Wealth</span>
</h2>`
  arr.forEach(ele => {
    let div = document.createElement("div")
    div.classList.add("person")
    div.innerHTML=`
      <strong>${ele.name}</strong>
      ${formoney(ele.money)}
    `
    main.appendChild(div)
  });
}
//资金翻倍
doubl.addEventListener("click",dou)
function dou(){
  arr.forEach(function(ele,index){
    ele.money*=2
  })
  updateDom(arr)
}
//百万富豪
millionaire.addEventListener("click",fuhao)
        function fuhao(){
          arr=arr.filter(function(ele,sun){
            return ele.money>100000
          })
          updateDom(arr)
        }
 //财富榜     
sort.addEventListener("click",caifu)
function caifu(){
  arr.sort(function(a,b){
    return b.money-a.money
  })
  updateDom(arr)
}
//计算总额
calculate.addEventListener("click",sm)
function sm(){
  let acc=arr.reduce(function(sum,ele,index){
    return sum=ele.money
  },0)
  let div=document.createElement("div")
  div.innerHTML=`<h2>Total sum:${formoney( acc)}</h2>`
  main.appendChild(div)
}
//添加$
 function formoney(money){
let res=money.toLocaleString()
return "$"+res+".00"
    // console.log("$"+res+".00");
}
// formoney(2562352)
    </script>
  </body>
</html>
